Skip to content

Timestamps frontend #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Timestamps frontend #30

wants to merge 5 commits into from
+27,542 −106

Conversation

pavlyhalim
Copy link

This pull request introduces significant enhancements to the animation system, with both backend and frontend improvements designed to streamline animation control and editing.

Backend Changes:

  • Joint Control Interface: A new web interface, built using FastAPI, provides controls for manipulating all joints within the animation system. This interface is built with the new Drake UI.

  • Keyframe Editor Enhancements:

    • Added "Next/Previous Keyframe" buttons for easier navigation.
    • Added an "Edit Keyframe" button to trigger keyframe modification.
    • Implemented a Time Slider and Time Edit field for precise time control.
    • Implemented Segment Management: Allows defining and naming segments within the keyframe sequence.
    • Added backend support for "Play" and "Stop" animation controls.

  • FastAPI Connector: Created a new FastAPI connector to facilitate communication between the React frontend and the backend.

Frontend Changes (React):

A new user interface (UI) has been developed using React, organized into distinct tabs for different functionalities:

  • Tab 1: Main Animation Control:

    • 3D mesh visualization display.
    • Sliders for each joint, allowing real-time manipulation of the animation.
    • "Edit Keyframe" functionality.
    • "Edit Time" functionality.
    • "Add New Keyframe" functionality.
    • "Next/Previous Keyframe" navigation buttons.

  • Tab 2: Segments:

    • Allows the user to specify the start and end indices (within the keyframes array) for creating animation segments.
    • Provides the ability to name these segments for easy identification and organization.

  • Tab 3: Keyframe Table:

    • Displays a table showing all keyframes.
    • Shows each keyframe's time, with "Up/Down" buttons to adjust the timestamp and automatically update the animation.
    • Displays the segment name associated with each keyframe.

gaddison-bdai
gaddison-bdai reviewed Apr 28, 2025
View reviewed changes
gaddison-bdai
gaddison-bdai reviewed Apr 28, 2025
View reviewed changes
@MarwanWalid2
Copy link
Contributor

@gaddison-bdai Code updated!

@kkarol-bdai
Copy link
Collaborator

Thanks so much for sharing this code with the community. To make sure others can also develop UIs customized to their needs, we're creating a new third_party folder to store this type of contribution.

  • Once this pr merges could you create a new project folder under third_party and move your code into that folder
  • Feel free to duplicate the web_animator files that this PR heavily alters within the third_party folder. That way the web_animator stays a simple baseline example that others can use as a template.
  • If possible, please split this PR into smaller PRs for review. For example, separate the package-lock.json into its own PR so to break up the review/approval process.
  • Please remove any unimplemented test files and boiler plate assets (PNGs, robot.txts, etc) that aren't relevant to the animation tool.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kkarol-bdai kkarol-bdai Awaiting requested review from kkarol-bdai

@gaddison-bdai gaddison-bdai Awaiting requested review from gaddison-bdai

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@pavlyhalim @MarwanWalid2 @kkarol-bdai @gaddison-bdai